<template>
  <div>
  <cat-list :catList="cats"></cat-list> 

  <!-- 轮播 -->
  <swiper v-show="showBanner" class="swiper" autoplay="true" indicator-dots circular="true" interval="5000" duration="500" >
    <block>
      <swiper-item @tap="onDetail(item.id)" class="swiperItem" v-for="(item, index) in banners" :key="index">
        <image mode="" :src="item.image"  />
      </swiper-item>
    </block>
  </swiper>
  <p-notice></p-notice>
  <p-list :plist="plist"></p-list> 
  <wx-btn></wx-btn>
  <p-login></p-login>
  </div>
</template>
<script>
import catList from "@/components/cat";
import pList from "@/components/plist";
import pNotice from "@/components/notice";
import wxBtn from "@/components/wxbtn";
import pLogin from "../../components/login";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    catList,
    pList,
    pNotice,
    wxBtn,
    pLogin
  },
  data() {
    return {
      showBanner: true,
      lastCatid: 0
    };
  },
  computed: {
    ...mapState(["banners", "cats", "plist", "currentCatid"])
  },

  updated() {
    //判断catid是否有改变，发生改变才执行
    if (this.currentCatid != this.lastCatid) {
      if (this.currentCatid != 0) {
        this.showBanner = false;
      } else {
        this.showBanner = true;
      }
      this.getList(true);
    }
    this.lastCatid = this.currentCatid;
  },
  methods: {
    ...mapActions(["getBanners", "getCats", "getP"]),
    async getBannerList() {
      await this.getBanners({});
    },
    async getCatsList() {
      await this.getCats({});
    },
    async getList(init) {
      if (this.currentCatid != this.lastCatid) {
        this.$store.state.plist = [];
      }
      let lastList = this.$store.state.plist;

      if (init) {
        this.$store.state.more = true;
        this.$store.state.page = 1;
      }

      this.getP({
        page: this.$store.state.page,
        size: this.$store.state.size,
        catid: this.currentCatid
      }).then(res => {
        if (res.length < 1) {
          this.$store.state.more = false;
          this.$store.state.plist = lastList;
          return;
        }
        if (!init) {
          this.$store.state.plist = lastList.concat(res);
        } else {
          this.$store.state.more = true;
        }
      });
    },
    onDetail(id) {
      wx.navigateTo({
        url: "/pages/detail/main?id=" + id
      });
    }
  },
  onUnload() {
    this.$store.state.more = true;
  },
  async created() {
    if (!wx.getStorageSync("userInfo")) {
      this.$store.state.actionSheetShow = true;
    }

    this.getBannerList();
    this.getCatsList();
    this.getList(true);
  },
  onPullDownRefresh: function() {
    this.getList(true);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (!this.$store.state.more) {
      return;
    }
    this.$store.state.page += 1;

    this.getList(false);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {}
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
.swiper {
  margin-top: 10rpx;
  height: 300rpx;
  overflow: hidden;
  padding-bottom: 10rpx;
  border-bottom: 20rpx solid $bgColor;
  .swiperItem {
    text-align: center;
    image {
      width: 96%;
      height: 300rpx;
    }
  }
}
</style>

